import React from 'react';
import { connect }  from 'react-redux';

import DashboardAuth from '@/decorator/dashboardauth';
import { getUserInfo } from '@/redux/modules/userInfo';
import NavLinkBar from '@/component/navlinkbar';
import { getUserMsgs, receive, startChatUserSocket, stopChatUserSocket } from '@/redux/modules/chatuser';

import { NavBar } from 'antd-mobile';

@connect(
    state => ({...state.user, chatUser: state.chatUser}),
    { getUserInfo, getUserMsgs, receive, startChatUserSocket, stopChatUserSocket }
)
@DashboardAuth
class Dashboard extends React.Component{
    componentWillMount(){
        this.props.startChatUserSocket();
    }
    componentWillUnmount(){
        this.props.stopChatUserSocket();
    }
    render(){
        const PATH = this.props.location.pathname,
              NBFLG = !/\/(finishedInfo)/.test(PATH),
              { match, userInfo } = this.props,
              BASE = match.path;

        const ay = [
            // boss if boss will show niu list
            {
                title: '牛人列表',
                path: `${BASE}/boss`,
                text: 'niu',
                icon: 'x',
                hide: userInfo.userType === 0
            },
            // niu if niu will show boss list
            {
                title: 'boss列表',
                path: `${BASE}/niu`,
                text: 'boss',
                icon: 'x',
                hide: userInfo.userType === 1
            },
            // me
            {
                title: '个人中心',
                path: `${BASE}/me`,
                text: 'me',
                icon: 'x',
            },
            // msg
            {
                title: '消息中心',
                path: `${BASE}/msg`,
                text: 'msg',
                icon: 'x',
            }
        ];
        
        const hd = ay.filter(item => item.path === PATH)[0];
        const ID = this.props.userInfo.id;

        if(!this.startSocket && ID){

            this.props.getUserMsgs();
            this.props.receive(ID);

            this.startSocket = !this.startSocket;
        }

        let count = 0;

        const charUser = this.props.chatUser;

        if(ID && charUser.msgs.length > 0){
            count = charUser.unread - charUser.msgs.filter(item => {return item.from === ID && item.isRead === false}).length;
        }

        // console.log(count);

        return (
            <div>
                {
                    this.props.isLogin && ID ? 
                        (<div>
                            {NBFLG && hd && <NavBar mode="drak">{hd.title}</NavBar>}
                            <div style={{margin: '20px 0'}}>
                            {
                                this.props.children
                            }
                            </div>
                            {NBFLG && hd && <NavLinkBar msgCount={count} list={ay} />}
                        </div>)
                    :
                    <div>加载中...</div>
                }
            </div>
        )
    }
}

export default Dashboard;